<template>
  <div>
    <SkyCardPanel title="单选">
      <div slot="main">
        <SkySingleChooseGroup label="选择项" v-model="radio">
          <SkySingleChoose label="备选项1" value="0"></SkySingleChoose>
          <SkySingleChoose label="备选项2" value="1"></SkySingleChoose>
          <SkySingleChoose label="备选项3" value="2"></SkySingleChoose>
        </SkySingleChooseGroup>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //单选
              
        &lt;SkySingleChooseGroup label="选择项" v-model="radio"&gt;
          &lt;SkySingleChoose label="备选项1" value="0"&gt;&lt;/SkySingleChoose&gt;
          &lt;SkySingleChoose label="备选项2" value="1"&gt;&lt;/SkySingleChoose&gt;
          &lt;SkySingleChoose label="备选项3" value="2"&gt;&lt;/SkySingleChoose&gt;
        &lt;/SkySingleChooseGroup&gt;

          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              //单选
              
              export default {
                data () {
                  return {
                    radio: '1',
                  }
                },
                watch: {
                  radio (val) {
                    console.log(val)
                  },
                }
              }
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

  </div>
</template>

<script>
  export default {
    data () {
      return {
        radio: '1',
      }
    },
    watch: {
      radio (val) {
        console.log(val)
      },
    }
  }
</script>

<style lang="scss" scoped>
</style>